<template>
  <!-- 我的收藏 -->
  <div class="mySub">
    <tab-menu :tabsMenuList="menus" v-on:tabsChange="tabsChange"></tab-menu>
    <!-- 自定义组件 -->
    <component :is="currentComponent" ref="subRef"></component>

  </div>
</template>

<script>
import TabMenu from '@/components/TabMenu/tabMenu.vue'
import subAlbum from '@/views/myMusic/mySub/subAlbumViews.vue'
import subSinger from '@/views/myMusic/mySub/subSingerViews.vue'
import subVideo from '@/views/myMusic/mySub/subVideoViews.vue'
export default {
  data () {
    return {
      menus: [{ name: '专辑' }, { name: '歌手' }, { name: '视频' }],
      componentOptions: [subAlbum, subSinger, subVideo],
      index: 0
    }
  },
  components: {
    TabMenu,
    subAlbum,
    subSinger,
    subVideo
  },
  methods: {
    tabsChange (index) {
      // console.log(index)
      // console.log(typeof index)
      this.index = index
    }
  },
  computed: {
    // 控制动态组件
    currentComponent () {
      return this.componentOptions[this.index]
    }
  }
}
</script>

<style lang="less" scoped>

</style>
